<template>
	<div id="container">
		<header>
			<van-nav-bar 
			  title="我的账单"
			  left-arrow
			  @click-left="onClickLeft"
			/>
		</header>
		<div id="content">
			<!-- bill-show -->
			<div class="bill-show">
				 <h2>总消费(元)</h2>
				 <h1>0.00</h1>
				 <h3>2019年</h3>
			</div>
			<!-- bill- -->
				<div class="bill-item">
					<van-icon name="edit" />
					<h3>暂无消费记录</h3>
				</div>
			
		</div>
	</div>
</template>

<script>
	
	export default{
		name:"Bill",
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	h1,h2,h3{
		padding: 0;
		margin: 0;
	}
	#container{
		height: 100vh;
		background: #f3f3f3;
	}
	/* --------------------bill-header----------------- */
	header .van-nav-bar{
		height:47px;
		background: #f65050;
	}
	header .van-nav-bar__title{
		font-size:18px;
		font-weight:600;
		font-family:"楷体";
		color:#fefafb;
	}
	.van-nav-bar__arrow{
		color:#fefafb;
		font-size:16px;
	}
	/* -------------------bill-content-show------------ */
	.bill-show{
		height: 138px;
		background:#f65050;
		overflow: hidden;
	}
	.bill-show h2,h1,h3{
		color: #ffffff;
		font-weight: 500;
		font-family: "楷体";
	}
	.bill-show h2{
		margin: 17px 0px 28px 42px;
		font-size: 15px;
	}
	.bill-show h1{
		margin: 0px 0px 19px 42px;
		font-size:30px;
	}
	.bill-show h3{
		margin-left:270px;
		font-size: 13px;
	}
	/* -------------------bill-tab----------------- */
	.bill-item {
		text-align: center;
	}
	.bill-item .van-icon-edit{
		font-size: 150px;
		color: #c0c4c7;
		margin-top:120px;
	}
	.bill-item h3{
		font-family: "楷体";
		font-size: 20px;
		color: #929292;
		font-weight: 600;
	}

	
</style>
